<script setup lang="ts">
import handleCollectionData from '@renderer/utils/handleCollectionData'
import handlePopover from '@renderer/utils/handlePopover'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import useKitchenInfo from '@renderer/store/useKitchenInfo'
import FormButton from './formButton.vue'
const route = useRouter()
const pageQuery = route.currentRoute.value.query
const { handleWardrobeFormItem, wardrobeFormItem } = handleCollectionData()
const getDataInit = async () => {
  if (wardrobeFormItem.value![0].area_name == '厨房') {
    wardrobeFormItem.value![1].width = String(diguiType.value)
  }
  return [...wardrobeFormItem.value!]
}
defineExpose({
  getDataInit,
})
const props = defineProps<{
  roomName: string
  wardrobeList: WardrobeListModel[]
}>()
const diguiType = ref(1)
const handleComputeLong = async () => {
  const kitchInfo = JSON.parse(useKitchenInfo().getInfo()!)
  if (diguiType.value == 1) {
    wardrobeFormItem.value![1].long = (kitchInfo.long_room as any) * 1 + (kitchInfo.width_room as any) * 1 - 0.6 + ''
  } else {
    wardrobeFormItem.value![1].long =
      (kitchInfo.long_room as any) * 1 +
      (kitchInfo.width_room as any) * 1 +
      (kitchInfo.width_room as any) * 1 -
      1.2 +
      ''
  }
  wardrobeFormItem.value![2].long = (kitchInfo.long_room as any) * 1 + ''
}
// watch(
//   () => useKitchenInfo().getInfo(),
//   async (value) => {
//     if (wardrobeFormItem.value![0].area_name == '厨房') {
//       const kitchInfo = JSON.parse(value!)
//       if (diguiType.value == 1) {
//         wardrobeFormItem.value![1].long =
//           (kitchInfo.long_room as any) * 1 + (kitchInfo.width_room as any) * 1 - 0.6 + ''
//       } else {
//         wardrobeFormItem.value![1].long =
//           (kitchInfo.long_room as any) * 1 +
//           (kitchInfo.width_room as any) * 1 +
//           (kitchInfo.width_room as any) * 1 -
//           1.2 +
//           ''
//       }
//       wardrobeFormItem.value![2].long = (kitchInfo.long_room as any) * 1 + ''
//     }
//   },
//   { deep: true },
// )
const initForm = async () => {
  if (props.wardrobeList.length) {
    const wardrobeInfo = props.wardrobeList.find((item) => item.area_name === props.roomName)
    if (wardrobeInfo) {
      let areaInfo = [] as any[]
      wardrobeInfo.area_info.forEach((item) => {
        delete item.id
        if (item.name == '厨房地柜') {
          diguiType.value = Number(item.width)
        }
        areaInfo.push(item)
      })
      wardrobeFormItem.value = areaInfo
    }
  }
}
const { findPopoverContent } = handlePopover()
await handleWardrobeFormItem(
  props.roomName,
  pageQuery.calculate_id as unknown as number,
  pageQuery.house_number as unknown as number,
)
await initForm()
</script>

<template>
  <main class="flex flex-col" v-for="(item, index) in wardrobeFormItem" :key="index">
    <el-divider>
      <span class="text-xl">{{ item.name }}</span>
    </el-divider>
    <el-form>
      <div class="flex justify-end mb-4" v-if="item.name == '厨房地柜'">
        <FormButton @click="handleComputeLong">计算厨柜长</FormButton>
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item :key="index" label-width="90">
            <template #label>
              <span @click="findPopoverContent('成品衣柜')">柜子类型:</span>
            </template>
            <el-input v-model="item.cate_name" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="item.name == '厨房地柜'">
          <el-form-item :key="index" label-width="90">
            <template #label>
              <span>厨房地柜:</span>
            </template>
            <el-radio-group v-model="diguiType" placement="row">
              <el-radio label="L型" :value="1" :customStyle="{ marginRight: '35px' }" />
              <el-radio label="U型" :value="0" />
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col
          :span="8"
          v-if="
            (item.cate_name != '高80cm以内' && item.cate_name != '厨房地柜' && item.cate_name != '厨房吊柜') ||
            (item.cate_name == '高80cm以内' && item.area_name == '楼梯间')
          ">
          <el-form-item :key="index" label-width="90">
            <template #label>
              <span @click="findPopoverContent('成品衣柜')">宽:</span>
            </template>
            <el-input v-model="item.width" type="number" @mousewheel.native.prevent placeholder="请输入">
              <template #append>米</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="8"
          v-if="
            (item.cate_name != '高80cm以内' && item.cate_name != '厨房地柜' && item.cate_name != '厨房吊柜') ||
            (item.cate_name == '高80cm以内' && item.area_name == '楼梯间')
          ">
          <el-form-item :key="index" label-width="90">
            <template #label>
              <span @click="findPopoverContent('成品衣柜')">高:</span>
            </template>
            <el-input v-model="item.height" type="number" @mousewheel.native.prevent placeholder="请输入">
              <template #append>米</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="8"
          v-if="
            (item.cate_name == '高80cm以内' && item.area_name != '楼梯间') ||
            item.cate_name == '厨房地柜' ||
            item.cate_name == '厨房吊柜'
          ">
          <el-form-item :key="index" label-width="90">
            <template #label>
              <span @click="findPopoverContent('成品衣柜')">长:</span>
            </template>
            <el-input v-model="item.long" type="number" @mousewheel.native.prevent placeholder="请输入">
              <template #append>米</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </main>
</template>

<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 10px;
  margin-right: 20px !important;
  flex: 1;
  display: flex;
}
</style>
